import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import store from '../store'
import { Progress, Button, WhiteSpace } from 'antd-mobile'


class Redux extends Component {
    constructor(props) {
        super(props);
        store.subscribe(this.handleStoreChange)
        this.state = {
            store: store.getState()
        }
        this.add = this.add.bind(this);
        this.sub = this.sub.bind(this);
        this.set = this.set.bind(this)
    }
    render() {
        return (
            <div className="redux">
                <WhiteSpace />
                <div className="progress-box">
                    <div className="progress">
                        <Progress percent={this.state.store.number} position="normal" />
                        <div aria-hidden="true">{this.state.store.number}%</div>
                    </div>
                </div>
                <WhiteSpace />
                <Button type="primary" disabled={this.state.store.number >= 100} onClick={this.add}>Add</Button>
                <WhiteSpace />
                <Button type="warning" disabled={this.state.store.number <= 0} onClick={this.sub}>Sub</Button>
                <WhiteSpace />
                <Button onClick={this.set} >Set-60</Button>
            </div>
        );
    }
    handleStoreChange = () => {
        this.setState({
            store: store.getState()
        })
    }
    add() {
        store.dispatch({
            type: 'add_number'
        })
    }
    sub() {
        store.dispatch({
            type: 'sub_number'
        })
    }
    set() {
        store.dispatch({
            type: 'set_number',
            number: 60
        })
    }

}

export default withRouter(Redux);